$GLOBALS['oSysTemplate']->addJs(array(BX_DOL_URL_ROOT . 'deano_dock/css-dock-menu/js/interface.js'));
$GLOBALS['oSysTemplate']->addCss(array(BX_DOL_URL_ROOT . 'deano_dock/css-dock-menu/style.css'));

$sImages = BX_DOL_URL_ROOT . 'deano_dock/css-dock-menu/images/';

$sCode = <<<CODE
<div style="height: 100px;">
<!--bottom dock -->
<div class="dock" id="dock2">
  <div class="dock-container2">
  <a class="dock-item2" href="#"><span>Home</span><img src="{$sImages}home.png" alt="home" /></a> 
  <a class="dock-item2" href="#"><span>Contact</span><img src="{$sImages}email.png" alt="contact" /></a> 
  <a class="dock-item2" href="#"><span>Portfolio</span><img src="{$sImages}portfolio.png" alt="portfolio" /></a> 
  <a class="dock-item2" href="#"><span>Music</span><img src="{$sImages}music.png" alt="music" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="{$sImages}video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>History</span><img src="{$sImages}history.png" alt="history" /></a> 
  <a class="dock-item2" href="#"><span>Calendar</span><img src="{$sImages}calendar.png" alt="calendar" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="{$sImages}link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="{$sImages}rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="{$sImages}rss2.png" alt="rss" /></a> 
  </div>
</div>

<!--dock menu JS options -->
<script type="text/javascript">
	
	$(document).ready(
		function()
		{
			$('#dock2').Fisheye(
				{
					maxWidth: 60,
					items: 'a',
					itemsText: 'span',
					container: '.dock-container2',
					itemWidth: 40,
					proximity: 80,
					alignment : 'left',
					valign: 'bottom',
					halign : 'center'
				}
			)
		}
	);

</script>
</div>
CODE;


echo $sCode;